<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="${ctx}/res/js/thirdParty/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${ctx}/res/js/thirdParty/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${ctx}/res/js/departmentManagement/deptUserSelectPopup.js"></script>

<style type="text/css">
		.menuContent {
			border:1px solid black;
			display:none;
			background-color:white;
			width:313px;
			height:300px;
			position:absolute;
			z-index:9999;
			overflow:auto;
		}
		option {
			height: 32px;
			line-height:32px;
			font-size:14px;
			
		}
		option:hover {
			background-color:#4499EE;
		}
		option:selected {
			background-color:#3265e8;
		}
	</style>
	
</head>
<body>
	<center>
		<table>
			<!-- 查询条件 区域 -->
			<tr>
				<td>
					<div class="list_query">
						<form action="/departmentManagement/queryAllUsers.do" method="post" id="queryUserForm">
							<label>
								<span>USERNAME/CN_NAME</span>
								<input type="text" style="margin-top:10px" id="userNameCondition" placeholder="请输入USERNAME/CN_NAME"  name="userNameCondition" value="" />
							</label> 
							
							<label>
							<span>DEPART_NAME</span>
						   		<input id="dept_name" type="text" style="width:300px;" readonly name="dept_id" value="----请选择部门----"  onclick="showMenu(); return false;"/>
						   		<input id="dept_id" type="hidden"/>
							</label> 
								<div id="menuContent" class="menuContent" >
									<ul id="departmentTree" class="ztree" style="margin-top:0;width:310px;"></ul>
								</div>		
							
							
							<label  hidden= "true">
								<span>CN_NAME</span>
								<input type="text" style="margin-top:10px"  id="cnNameCondition" placeholder="请输入CN_NAME"  name="cnNameCondition" value="" />
							</label>
						</form>
					</div>
				</td>
			</tr>

			<!-- 按钮操作区域 -->
			<tr>
				<td>
					<div class="list_toolbar">
						<div class="toolButton" onclick="queryData();">查询</div>
					</div>
				</td>
			</tr>

			<!-- 表头区域-->
			<tr>
				<td>
					<table class="list_grid">
						<thead>
							<tr>
								<th>USERNAME</th>
								<th>DEPT_NAME</th>
								<th>CN_NAME</th>
								<th>EMP_CODE</th>
								<th>CREATE_USER</th>
								<th>CREATE_TIME</th>
								<th style="width: 1px;"></th>
							</tr>
						</thead>
					</table>
				</td>
			</tr>
			
			<!-- 数据区域 -->
			<tr>
				<td>
					<div class="list_scrollControlDiv">
						<table class="list_grid" style="border-spacing: 0;">
							<tbody id="tBodyList">
							</tbody>
						</table>
					</div>
				</td>
			</tr>
			
			<!-- 分页控件区域 -->
			<tr>
				<td>
					<div id="pagination" class="pagination"></div>
				</td>
			</tr>
			
		</table>
	</center>
	<!-- 已选择区域 --> 
			 <table style="tablealign:left;">
				<tr>
			     	<td>
					   <div class="toolButton" onclick="choose();">选择</div>
					</td>  
				    <td rowspan =2>
					   <div id="selected" class="selected" ></div> 
					</td> 
				</tr>	
				<tr>
					<td>
					   <div class="toolButton" onclick="cancel();">取消</div>	
					</td> 
				</tr>	
			 </table> 
</body>
</html>